<template>
<div>
  <Breadcrumb :items="['系统管理', '角色及授权管理']" />
  <a-card class="general-card" title="角色及授权管理">
    <template #extra>
      <a-space direction="horizontal" :size="18">
        <a-button v-authorities="['sys:role:read']" type="primary" :loading="loading" @click="refresh" >
          <template #icon>
            <icon-refresh />
          </template>
          刷新
        </a-button>
      </a-space>
    </template>

    <!--分割线-->
    <a-divider direction="horizontal" />
    <a-row style="margin-bottom: 16px">
      <a-col :span="16">
        <a-space>
          <a-button v-authorities="['sys:role:write']" type="primary" @click="openBoard(null, Operation.CREATE)">
            <template #icon>
              <icon-plus />
            </template>
            添加
          </a-button>
        </a-space>
      </a-col>
      <a-col :span="8" style="text-align: right">
        <a-space>
          <table-column-setting v-model:columns="columns" />
        </a-space>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :data="records"
      :loading="loading"
      row-key="id"
      :pagination="false">
      <template #number="{ record, rowIndex }">
        {{ rowIndex + 1 }}
      </template>
      <template #operation="{ record }">
        <a-button
          v-authorities="['sys:allot:authority']"
          type="text"
          size="small"
          @click="openAllot(record.id)"
        >
          <icon-robot-add /> 分配权限
        </a-button>
        <a-button type="text" size="small" @click="openBoard(record.id,  Operation.PREVIEW)">
          查看
        </a-button>
        <a-button v-authorities="['sys:role:write']" type="text" size="small" @click="openBoard(record.id, Operation.UPDATE)">
          修改
        </a-button>
        <a-popconfirm :content="`确定删除 '${record.name}' 吗?`" type="warning" @ok="doRemove(record.id)">
          <a-button v-authorities="['sys:role:write']" type="text" size="small" status="danger">
            删除
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </a-card>

  <role-board ref="board" @ok="refresh"/>
  <allot-authority ref="allot" />
</div>
</template>

<script>
import useLoading from "@/hooks/loading";
import {deleteById, listAll} from "@/api/modules/system/role";
import RoleBoard from "@/views/system/role/components/role-board.vue";
import {Operation} from "@/types/global";
import AllotAuthority from "@/views/system/role/components/allot-authority.vue";

const columns = [{
  title: '#',
  align: 'right',
  fixed: 'left',
  width: 50,
  slotName: 'number'
}, {
  title: "角色名",
  dataIndex: "name",
}, {
  title: '角色编码',
  dataIndex: 'code',
}, {
  title: '创建时间',
  dataIndex: 'createTime'
},{
  title: '修改时间',
  dataIndex: 'updateTime'
}, {
  title: "操作",
  align: "right",
  fixed: "right",
  dataIndex: 'operation',
  slotName: 'operation'
}]
const { loading, setLoading } = useLoading();
export default {
  name: 'Role',
  components: {AllotAuthority, RoleBoard},
  data() {
    return {
      columns,
      records: [],
      loading,
      Operation
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    async refresh() {
      setLoading(true)
      try {
        const { data } = await listAll()
        this.records = data
      } finally {
        setLoading(false)
      }
    },
    async openBoard(id, operation) {
      try {
        setLoading(true)
        await this.$refs.board.open(id, operation)
      } finally {
        setLoading(false)
      }
    },
    async openAllot(id) {
      try {
        setLoading(true)
        await this.$refs.allot.open(id)
      } finally {
        setLoading(false)
      }
    },
    async doRemove(id) {
      try {
        setLoading(true)
        await deleteById(id)
        await this.refresh()
      } finally {
        setLoading(false)
      }
    }
  }
};
</script>

<style scoped>

</style>
